<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/profile">Profile</router-link></li>
        <li><router-link to="/user/100">User/100</router-link></li>
        <li><router-link to="/user/200">User/200</router-link></li>
        <li><router-link to="/user/100/post/200">/user/100/post/200</router-link></li>
        <li><router-link to="/goods-apple">/goods-apple</router-link></li>
    </ul>
    <!--路由匹配到的组件将会渲染在此组件中-->
    <router-view></router-view>
   </div>
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script> 
   <script>
    var Home = {template:'<div>Home</div>'};
    var User = {template:'<div>User:{{$route.params.userId}}</div>'};
    var Profile = {template:'<div>Profile</div>'};
    var Profile1 = {template:'<div>Profile1</div>'};
    var Profile2 = {template:'<div>Profile2</div>'};
    var UserPost = {template:'<div>User:{{$route.params.userId}},Post:{{$route.params.postId}}</div>'};
    var NotFound = {template:'<div>NotFound{{$route.params.pathMatch}}</div>'};//404路由，就是没有路径能匹配上的话，会渲染默认的404页面
    var Goods = {template:'<div>Goods:{{$route.params.pathMatch}}</div>'};
    //编写路由配置对象数组，每个对象里规定了什么路径对应什么组件
    //在内部并不是严格按顺序匹配的，内部有一个权重的概念，有一个优先级的概念，严格匹配优先级高，带*的优先级低
    var routes = [
        {path:'/',component:Home},
        {path:'/profile',component:Profile2},
        {path:'/profile',component:Profile1},
        {path:'/user/:userId',component:User},//:变量名称为动态路径参数，它可以匹配任意的字符串
        {path:'/user/:userId/post/:postId',component:UserPost},
        {path:'/goods-*',component:Goods},//也可以匹配路径的一部分,如果path里有通配符的话，*匹配的值会放在params.pathMatch
        {path:'*',component:NotFound},//*可以匹配整个路径
    ]
    //创建一个VueRouter类的实例，选项对象里有一个routes配置数组
    var router = new VueRouter({
        routes
    });
    console.log(router)
    var vm = new Vue({
        el:'#app',
        router,   //this.$router
    });
   </script>
</body>
</html>